<script setup lang="ts">
import {Top} from "@element-plus/icons-vue";

const props = defineProps({
  isLinked: {
    type: Boolean,
    required: true
  },
  isSelected: {
    type: Boolean,
    required: true
  },
  isUploaded: {
    type: Boolean,
    required: true
  },
});

const buttonText = computed(() => {
  // console.log("button text");
  // console.log(props.isLinked, props.isSelected, props.isUploaded);

  // 如果isUploaded为真，那么result为"已上传"
  if (props.isUploaded) {
    return "已上传";
  }
  // 否则，如果isLinked为真，那么result为"已绑定"
  else if (props.isLinked) {
    // 如果isSelected为真，那么result为"确定上传"
    if (props.isSelected) {
      return "确定上传";
    }
    // 否则，result为"已绑定"
    else {
      return "已绑定";
    }
  }
  // 否则，result为"确定上传"
  else {
    return "确定上传";
  }
});

const buttonDisable = computed(() => {
  // console.log("button disable");
  // console.log(props.isLinked, props.isSelected, props.isUploaded);
  // 原始条件
  const result = (
      (!props.isLinked && !props.isSelected && !props.isUploaded) ||
      (!props.isLinked && props.isSelected && props.isUploaded) ||
      (props.isLinked && !props.isSelected && !props.isUploaded) ||
      (props.isLinked && props.isSelected && props.isUploaded));
  // 化简条件
  // const result = (props.isLinked ^ props.isSelected ^ props.isUploaded);
  // console.log(result);

  return result;
});
</script>

<template>
  <span class="upload-button-component">
    <el-button
        :disabled="buttonDisable"
        style="font-size: 14px;"
        type="success">
      <el-icon>
        <Top/>
      </el-icon>
      {{ buttonText }}
    </el-button>
  </span>
</template>

<style scoped lang="scss">

</style>
